<template>
	<div class="loginContainer">
		<div class="loginHeaderContainer">
			<login-header :is-login-register-btn = "isLoginRegisterBtn"></login-header>
		</div>
		<div class="loginForm">
			<div class="loginFormContainer">
				<h2 class="text_align_center margin_bottom_10" style="color: rgba(0, 0, 0, 0.5);">登&nbsp;&nbsp;&nbsp;录</h2>
				<h4 class="margin_bottom_5 font_size_14" v-show="isLoginError" style="color: red;padding-left: 30px;">{{loginErrorMessage}}</h4>
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm" @keyup.enter.native="submitForm('ruleForm')">
					<div>
						<el-form-item prop="userName" style="margin-bottom: 20px">
							<el-input type="text" v-model="ruleForm.userName" auto-complete="off" placeholder="请输入用户名" class="userName"></el-input>
						</el-form-item>
						<el-form-item prop="userPassword">
							<el-input type="password" v-model="ruleForm.userPassword" auto-complete="off" placeholder="请输入密码" class="userPassword"></el-input>
						</el-form-item>
					</div>
					<div style="margin-top: 30px;" class="text_align_center">
						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')" class="width_100 font_size_15">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
						</el-form-item>
					</div>
				</el-form>
				<div class="operationBtnContainer">
					<el-row :gutter="20">
						<el-col :span="10">
							<el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
						</el-col>
						<el-col :span="14" class="text_align_right font_size_14">
							<!--<span class="cursor_pointer" style="color: #606266;" @click="forgetPassword()">忘记密码</span>-->
							<router-link style="color: #606266;" to="/ForgetPassword">忘记密码</router-link>
							<span> / </span>
							<!--<span class="cursor_pointer" style="color: #409EFF;" @click="goRegister()">去注册</span>-->
							<router-link style="color: #409EFF;" to="/Register">去注册</router-link>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<style>
	.loginForm {
		width: 100%;
		height: 600px;
		background-image: url(../../static/images/back_2.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		margin-top: 20px;
		position: relative;
	}
	
	.loginFormContainer {
		width: 350px;
		height: 315px;
		padding: 15px 35px;
		position: absolute;
		top: 50%;
		right: 300px;
		margin-top: -150px;
		background-color: rgba(238, 238, 238, 0.7);
		border-radius: 8px;
	}
	
	.userName input,
	.userPassword input {
		border-radius: 20px !important;
	}
</style>

<script type="text/ecmascript-6">
	import LoginHeader from "@/components/LoginHeader.vue"
	import axios from "axios"
	export default {
		data() {
			var validateUserName = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入用户名'));
				} else {
					callback();
				}
			};
			var validateUserPassword = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					userPassword: "",
					userName: ""
				},
				rules: {
					userName: [{
						validator: validateUserName,
						trigger: 'blur'
					}],
					userPassword: [{
						validator: validateUserPassword,
						trigger: 'blur'
					}]
				},
				rememberPassword: true,
				//登录错误
				isLoginError : false,
				loginErrorMessage : "",
				//登录导航显示 登录 注册按钮
				isLoginRegisterBtn : false
			};
		},
		components: {
			//login header
			LoginHeader
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						console.log(this.ruleForm.userName + ":" + this.ruleForm.userPassword);
						axios.post("/users/login", {
							userName: this.ruleForm.userName,
							userPassword: this.$md5(this.ruleForm.userPassword)
						}).then((response) => {
							var data = response.data;
							if (data.status == 0) {
								this.$router.push({
									path: "/"
								});
							}else if (data.status == 1001) {
								this.isLoginError = true;
								this.loginErrorMessage = data.result;
							}
						});
					} else {
						return false;
					}
				});
			}
		}
	}
</script>